<!--_meta 作为公共模版分离出去-->
<#include "include/_meta.html">
<!--/meta 作为公共模版分离出去-->

<title>添加管理员 - 管理员管理</title>
<meta name="keywords" content="汽车租赁">
<meta name="description" content="H-ui.admin v2.3，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
<article class="page-container">
    <form class="form form-horizontal" id="form-car-add">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车牌号：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value="" placeholder="车牌号" id="carcode"
                       name="carcode">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车辆颜色：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value="" placeholder="车辆颜色" id="carcolor"
                       name="carcolor">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>购买日期：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <!--	<input type="password" class="input-text" autocomplete="off" value="" placeholder="购买日期" id="password2" name="password2"> -->
                <input type="text" autocomplete="off" onfocus="WdatePicker({maxDate:'%y-%M-%d'})" id="buydate"
                       class="input-text Wdate" style="width:120px;">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>发动机号：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value="" placeholder="发动机号" id="enginenum"
                       name="enginenum">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车架号：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value="" placeholder="车架号" id="framenum"
                       name="framenum">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车主手机：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" autocomplete="off" placeholder="车主手机" name="mobile"
                       id="mobile">
            </div>
        </div>
        <!--	<div class="row cl">
                <label class="form-label col-xs-4 col-sm-3">角色：</label>
                <div class="formControls col-xs-8 col-sm-9"> <span class="select-box" style="width:150px;">
                    <select class="select" id="adminRole" name="adminRole" size="1">
                        <option value="0">超级管理员</option>
                        <option value="1">总编</option>
                        <option value="2">栏目主辑</option>
                        <option value="3">栏目编辑</option>
                    </select>
                    </span> </div>
            </div> -->

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>身份证号：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value="" placeholder="身份证号" id="idcard"
                       name="idcard">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车主姓名：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value="" placeholder="车主姓名" id="name"
                       name="name">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">车辆类型：</label>
            <div class="formControls col-xs-8 col-sm-9"> <span class="select-box" style="width:150px;">
			<select class="select" id="cartype" name="cartype" size="1">
				<option value="经济型">经济型</option>
				<option value="舒适性">舒适性</option>
				<option value="精英型">精英型</option>
				<option value="SUV">SUV</option>
				<option value="七座MPV">七座MPV</option>
				<option value="电动型">电动型</option>
			</select>
			</span></div>
            </br>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车辆品牌：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" autocomplete="off" value="" placeholder="车辆品牌" id="carbrand"
                           name="carbrand">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>品牌型号：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" autocomplete="off" placeholder="品牌型号"
                           id="carbrandtype" name="carbrandtype">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>合同日期：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" autocomplete="off" onfocus="WdatePicker({maxDate:'%y-%M-%d'})" id="contractdate"
                           class="input-text Wdate" style="width:120px;">
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3">自动手动：</label>
                <div class="formControls col-xs-8 col-sm-9">
					<span class="select-box" style="width:150px;">
						<select class="select" id="isauto" name="isauto" size="1">
							<option value="0">手动</option>
							<option value="1">自动</option>
						</select>
					</span>
                </div>
                </br>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>排量大小：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="" autocomplete="off" placeholder="排量大小"
                               id="enginesize" name="enginesize">
                    </div>
                </div>


                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>座位数量：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="" autocomplete="off" placeholder="座位数量"
                               id="seatnum" name="seatnum">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>外观类型：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="" autocomplete="off" placeholder="外观类型"
                               id="facetype" name="facetype">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车辆图片：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" readonly="readonly" value="" placeholder="车辆图片" id="picid"
                               name="picid">
                    </div>
                </div>

                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>缩略图：</label>
                    <div class="formControls col-xs-8 col-sm-9" id="uploader-demo" style="withed:150px;height:150px">
                        <!--用来存放item-->
                        <div id="fileList" class="uploader-list"></div>
                        <div id="filePicker">选择图片</div>
                    </div>
                </div>
                <div class="row cl">
                    <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                        <input class="btn btn-primary radius" type="button" value="&nbsp;&nbsp;提交&nbsp;&nbsp;"
                               onclick="$('#form-car-add').submit()"/>
                    </div>
                </div>
            </div>
		</div>
    </form>
</article>

<!--_footer 作为公共模版分离出去-->
<#include "include/_footer.html">
<!--/_footer /作为公共模版分离出去-->
<script type="text/javascript" src="lib/webuploader/0.1.5/webuploader.min.js"></script>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">


    $(function () {
        var uploader = WebUploader.create({
            auto: true,
            swf: 'lib/webuploader/0.1.5/Uploader.swf',
            server: '/uploadFile',
            pick: '#filePicker',
            fileVal: 'uploadfile',
            resize: false,
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }

        });

// 当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {
            var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
                '</div>'
                ),
                $img = $li.find('img');
            // $list为容器jQuery实例

            $("#uploader-demo").append($li);

            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');

                    return;
                }

                $img.attr('src', src);
            }, "100", "100");
        });


// 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress span');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<p class="progress"><span></span></p>')
                    .appendTo($li)
                    .find('span');
            }

            $percent.css('width', percentage * 100 + '%');
        });

// 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function (file, response) {
            if ($("#picid").val() == '') {
                $("#picid").attr("value", (response.flag));
            } else {
                $("#picid").attr("value", ($("#picid").val() + ',' + response.flag));
            }

            $('#' + file.id).addClass('upload-state-done');
        });

// 文件上传失败，显示上传出错。
        uploader.on('uploadError', function (file) {
            var $li = $('#' + file.id),
                $error = $li.find('div.error');

            // 避免重复创建
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }

            $error.text('上传失败');
        });

// 完成上传完了，成功或者失败，先删除进度条。
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').remove();
        });

        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        $("#form-car-add").validate({
            rules: {
                carcode: {
                    required: true,
                },

                name: {
                    required: true,
                    minlength: 2,
                    maxlength: 6
                },
                idcard: {
                    required: true

                },
                mobile: {
                    required: true,
                    isMobile: true,
                    minlength: 11
                },
                carcolor: {
                    required: true,
                },
                enginenum: {
                    required: true,
                },
                framenum: {
                    required: true,
                },
                idcard: {
                    required: true,
                    isIdCardNo: true
                },
                carbrand: {
                    required: true,
                },
                carbrandtype: {
                    required: true,
                },
                enginesize: {
                    required: true,
                },
                seatnum: {
                    required: true,
                }
            },

            onkeyup: false,
            focusCleanup: true,
            success: "valid",
            submitHandler: function (form) {

                $.ajax({
                    type: 'post',
                    url: '/cars/add',
                    data: {
                        'carcode': $("#carcode").val(),
                        'carcolor': $("#carcolor").val(),
                        'buydate': $("#buydate").val(),
                        'enginenum': $("#enginenum").val(),
                        'framenum': $("#framenum").val(),
                        'mobile': $("#mobile").val(),
                        'idcard': $("#idcard").val(),
                        'name': $("#name").val(),
                        'cartype': $("#cartype").val(),
                        'carbrand': $("#carbrand").val(),
                        'carbrandtype': $("#carbrandtype").val(),
                        'contractdate': $("#contractdate").val(),
                        'picid': $("#picid").val(),
                        'isauto': $("#isauto").val(),
                        'enginesize': $("#enginesize").val(),
                        'seatnum': $("#seatnum").val(),
                        'facetype': $("#facetype").val(),
                        'carstate': 1
                    },
                    success: function (data) {
                        alert("提交成功！");
                        window.location.reload();
                    }

                });


            }
        });
    });
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>